<template>
  <a-drawer title="咨询信息" placement="right" :closable="false" :visible="visible" @close="onClose" width="650px">
    <div class="drawer-content">
      <div class="info">
        <div>咨询人<span>{{form.consultantName}}</span></div>
        <div>身份证号<span>{{form.identification}}</span></div>
        <div>人员类型<span>{{personTypeMap[form.consultantType]}}</span></div>
        <div>联系电话<span>{{form.phone}}</span></div>
        <div>咨询主题<span>{{form.consultTopic}}</span></div>
        <div>咨询次数<span>{{form.consultNum}}</span></div>
        <div>谈话方式<span>{{form.consultType == 1 ? '线上咨询' : '线下咨询'}}</span></div>
        <div>咨询时间<span>{{form.consultStartTime}} - {{form.consultEndTime}}</span></div>
        <div v-if="form.consultType == 2">谈话地点<span>{{form.placeConversation}}</span></div>

        <div v-if="form.consultType == 2">详细地址<span>{{form.detailAddress}}</span></div>
      </div>
      <div class="title">
        <div>谈话内容</div>
      </div>
      <div class="consult-content">{{form.consultContent}}</div>
      <div class="sub-title">下次咨询主题</div>
      <div class="sub-content">{{form.nextConsultTopic}}</div>
      <div class="sub-title">附件</div>
      <div class="file-list" v-if="form.fileId">
        <j-upload v-model="form.fileId" :number="1"></j-upload>
        
      </div>
    </div>
    
  </a-drawer>
</template>

<script>
  import { consultDetail } from '@/api/sjsk/psycholog/consult'
  import { getAction } from '@api/manage'
  
  export default {
    name: 'DetailDrawer',
    data() {
      return {
        visible: false,
        form: {
          
        },
        personTypeMap: {}
      }
    },
    created() {
      this.loadDictOptions()
    },
    methods: {
      loadDictOptions(){
        getAction(`/sys/dict/getDictItems/personType`,{}).then(res=>{
          if (res.success) {
            const obj = {}
            this.person = res.result.map(item => {
              obj[item.value] = item.text
            })
            this.personTypeMap = obj
          }
        })
      },
      getDetail(id, type) {
        consultDetail({id, type}).then(res => {
          Object.assign(this.form, res.result)
          this.visible = true
        })
      },
      onClose() {
        this.visible = false
      },
      show(item) {
        console.log(item)
        const type = (item.consultantType.includes('1') || item.consultantType.includes('2')) ? '1' : '2'
        this.getDetail(item.id, type)
      },
      setFileList(str) {
        'temp/ScreenShot_07_23_00_09_18_1672070651264.png,emp/ScreenShot_07_22_22_43_49_1672070650214.png'
        const list = str.split(',')
        return list.map(item => {
          const itemList = item.split('/')
          return {
            name: itemList[itemList.length - 1],
            url: item
          }
        })
      }
    }
  }
</script>

<style lang="less" scoped>
  /deep/.ant-upload {
    display: none;
  }
  .drawer-content{
    .info{
      color: rgba(85, 85, 85, 0.9);
      >div{
        margin-bottom: 10px;
      }
      span{
        margin-left: 20px;
      }
    }
    .title{
      border-bottom: 1px solid #ddd;
      div{
        display: inline-block;
        margin-top: 10px;
        padding: 10px 20px;
        color: #1890FF;
        font-size: 17px;
        border-bottom: 2px solid #1890FF;
      }
    }
    .consult-content{
      padding: 30px 0;
    }
    .sub-title{
      font-weight: bold;
    }
    .sub-content{
      padding: 30px 0;
    }
  }
</style>
